<template>
	<div class="layout-pd">
		<zh-header-toolbar>
      <zh-button buttonType="add" @click="openSave">新增</zh-button>
      <zh-upload
          style="margin-left: 5px;margin-right: 5px;"
          :show-file-list="false"
          :http-request="fileInput"
          type="file"
          btnName="数据导入"
          v-func:eduStudentEnroll0030
      ></zh-upload>
      <zh-download-excel :funcCode="pageData.funcCode" :modelCode="pageData.modelCode" icon="ele-Download" :version="pageData.excelVersion">
        模板下载
      </zh-download-excel>
		</zh-header-toolbar>
		<zh-row>
			<zh-col :span="6">
				<zh-card shadow="hover" mode="default" title="菜单树">
					<template #header>
						<zh-row>
							<zh-col :span="2" style="color: var(--el-color-primary)">
								<div style="line-height: 60px; height: 60px">
									<SvgIcon name="ele-Menu" :size="24" />
								</div>
							</zh-col>
							<zh-col :span="22">
								<zh-select
									:lazy="true"
									placeholder="请选择所属应用"
									:allowClear="false"
									v-model="treeQueryParams.appId"
									:fieldNames="{ label: 'appName', value: 'appId' }"
									funcCode="application0012"
									searchField="appName"
									:searchParams="{type: '2',authStatus: '1',status: '1'}"
									@change="appChange"
								></zh-select>
							</zh-col>
						</zh-row>
					</template>
					<div>
						<zh-tree
							ref="appmenuTreeRef"
							:queryParam="treeQueryParams"
							funcCode="appmenu0025"
							:expand-on-click-node="false"
							node-key="key"
							:height="isTagsview ? `calc(100vh - 142px)` : `calc(100vh - 108px)`"
							:draggable="true"
							:props="{ label: 'title' }"
							@node-click="onNodeClick"
						></zh-tree>
					</div>
				</zh-card>
			</zh-col>
			<zh-col :span="18">
				<zh-card shadow="hover">
          <zh-table
              ref="userListTable"
              title="用户列表"
              :height="600"
              funcCode="appUserAuthorize0001"
              :timeout="30000"
              :columns="pageData.tableColumn"
              :radio-config="{ trigger: 'row' }"
              :disabled="false"
              highlight-current-row
          >
            <template #operate_default="{ row }">
              <el-tooltip effect="dark" content="删除用户信息" placement="top">
                <zh-button v-func:user0008 button-type="del" link @click="deleteUser(row)"></zh-button>
              </el-tooltip>
            </template>
          </zh-table>
				</zh-card>
			</zh-col>
		</zh-row>

    <zh-dialog
        title="移动端页面授权人员"
        width="30%"
        v-model="state.visible"
        @confirm="savePerson"
    >
      <zh-form :model="state.formData" label-width="150px">
        <zh-form-input prop="fullName" label="人员姓名"   :span="24"
                       v-model="state.formData.fullName"></zh-form-input>
        <zh-form-input prop="idcard" label="身份证号"   :span="24"
                       v-model="state.formData.idcard"></zh-form-input>
      </zh-form>
    </zh-dialog>
	</div>
</template>
<script lang="ts" setup name="routerManager">
import { ElMessage } from 'element-plus';
import http from "@/utils/request";
const COMMON_URL = '/doc/api/';
const VITE_APP_ID = import.meta.env.VITE_APP_ID as string;
const VITE_API_URL = import.meta.env.VITE_API_URL as string;
//----------------定义子组件 begin------------------------------
const appmenuTreeRef = ref();
const userListTable = ref();
//-----------------获取缓存参数-----------------------------
const { isTagsview } = storeToRefs($store.theme);
//---------------------内部变量定义 begin--------------------------------------
const selectNode: any = ref(null);
const treeQueryParams: any = ref({ appId: VITE_APP_ID });

const appmenuInfo = ref({ menuId: '', parentId: null, orderNo: null, parentTitle: null, rate: null, linkPath: '', appId: VITE_APP_ID });
//---------------------内部变量定义 end--------------------------------------
const pageData = reactive({
  funcCode: 'excelModel0008',
  modelCode: 'x0001',
  excelVersion: '',
  tableColumn: [
    { type: 'seq', width: 60, fixed: 'left', align: 'center', title: '序号' },
    { field: 'fullName', title: '用户姓名', align: 'center', fixed: 'left', width: 150 },
    { field: 'createTime', title: '创建时间', align: 'center', width: 200 },
    { field: 'operate', title: '操作', align: 'center', fixed: 'right', width: 220, slots: { default: 'operate_default' } },
  ],
  queryParams: {
    authorizeType: 'page'
  }
});

const state = reactive({
  visible: false,
  formData: {

  },
})
//---------------------定义调用方法--------------------------------------
const onNodeClick = (node) => {
	//点击树节点触发事件
	selectNode.value = node;
	appmenuInfo.value.menuId = node.key;
	pageData.queryParams.menuId = appmenuInfo.value.menuId;
	changeActiveName();
};
//改变tab调用方法
const changeActiveName = () => {
  userListTable.value.query(pageData.queryParams);
};
const appChange = () => {
	appmenuTreeRef.value.query();
	selectNode.value = null;
	appmenuInfo.value = { menuId: '', parentId: null, orderNo: null, parentTitle: null, rate: null, linkPath: '', appId: treeQueryParams.value.appId };
	pageData.queryParams.appId = treeQueryParams.value.appId;
	pageData.queryParams.menuId = undefined;
};
const fileInput = (uploadFiles) => {
  if(!pageData.queryParams.appId || !pageData.queryParams.menuId){
    $messageBox.warning('请先选择节点', '提示');
    return;
  }
  const url = `${VITE_API_URL}` + COMMON_URL;
  const funcCode = 'appmenu0026';
  const formData = new FormData();
  console.log(uploadFiles.file)
  formData.append('file', uploadFiles.file);
  formData.append('modelCode', 'x0001');
  formData.append('menuId', pageData.queryParams.menuId);
  formData.append('appId', pageData.queryParams.appId);
  formData.append('version', '1.0');
  pageData.importVisible = true;
  pageData.successList = [];
  pageData.errorList = [];
  http.uploadFile(url + funcCode, formData).then((res) => {
    if (res.code == 0) {
      //刷新数据
      $messageBox.success('导入成功', '提示');
      userListTable.value.query(pageData.queryParams);
    }
  });
};

function deleteUser(row) {
  $api.common.send.post('appUserAuthorize0006', {appUserAuthorizeId: row.appUserAuthorizeId}).then((res) => {
    $messageBox.success('删除成功', '提示');
    userListTable.value.query(pageData.queryParams);
  });
}

function openSave() {
  if(!pageData.queryParams.appId || !pageData.queryParams.menuId){
    $messageBox.warning('请先选择节点', '提示');
    return;
  }
  state.visible = true;
}

function closeSave() {
  state.formData.fullName = "";
  state.formData.idcard = "";
  state.visible = false;
}

function savePerson() {
  $api.common.send
      .post("appUserAuthorize0004", {fullName: state.formData.fullName,idcard: state.formData.idcard,
      menuId: pageData.queryParams.menuId,appId: pageData.queryParams.appId,authorizeType: "page"})
      .then(() => {
        $messageBox.success("新增成功", "提示");
        userListTable.value.query(pageData.queryParams);
        closeSave();
      })
      .catch(() => {});
}
</script>
<style lang="scss" scoped></style>
